Skip to main content

Intro

The Kyber 13 Design System extends Bootstrap 5.3 with additional components, styles, and utility classes. There are notable changes to colors, spacing, and typography. It also exposes all of the Bootstrap utility classes and CSS custom properties (CSS variables) for use in your application.

CSS Custom properties​

Kyber uses CSS custom properties to allow for easy theming globally or at the component level. When extending styles of individual components it is necessary to provide the CSS property value at the component class. For example, to change the background color of a button to red, you would add the following CSS:

Current :root CSS custom properties
--bs-blue: rgb(62, 123, 173);
--bs-indigo: rgb(129, 136, 235);
--bs-purple: rgb(173, 115, 250);
--bs-pink: rgb(235, 91, 177);
--bs-red: rgb(237, 100, 88);
--bs-orange: rgb(235, 145, 61);
--bs-yellow: rgb(242, 194, 61);
--bs-green: rgb(70, 166, 95);
--bs-teal: rgb(77, 189, 178);
--bs-cyan: rgb(73, 158, 184);
--bs-black: #000;
--bs-white: #fff;
--bs-gray: rgb(103, 115, 133);
--bs-gray-dark: rgb(45, 54, 69);
--bs-blue-25: rgb(250, 253, 255);
--bs-blue-50: rgb(242, 250, 255);
--bs-blue-75: rgb(229, 245, 255);
--bs-blue-100: rgb(217, 240, 255);
--bs-blue-200: rgb(178, 218, 247);
--bs-blue-300: rgb(151, 203, 240);
--bs-blue-400: rgb(121, 180, 224);
--bs-blue-500: rgb(93, 154, 201);
--bs-blue-600: rgb(62, 123, 173);
--bs-blue-700: rgb(49, 95, 135);
--bs-blue-800: rgb(37, 70, 102);
--bs-blue-900: rgb(26, 45, 64);
--bs-blue-925: rgb(23, 34, 46);
--bs-blue-950: rgb(16, 23, 31);
--bs-blue-975: rgb(11, 16, 20);
--bs-indigo-25: rgb(252, 253, 255);
--bs-indigo-50: rgb(245, 246, 255);
--bs-indigo-75: rgb(237, 240, 255);
--bs-indigo-100: rgb(232, 234, 255);
--bs-indigo-200: rgb(207, 210, 255);
--bs-indigo-300: rgb(184, 188, 255);
--bs-indigo-400: rgb(157, 163, 252);
--bs-indigo-500: rgb(129, 136, 235);
--bs-indigo-600: rgb(99, 107, 214);
--bs-indigo-700: rgb(71, 79, 178);
--bs-indigo-800: rgb(54, 57, 128);
--bs-indigo-900: rgb(35, 37, 77);
--bs-indigo-925: rgb(27, 28, 54);
--bs-indigo-950: rgb(20, 21, 38);
--bs-indigo-975: rgb(14, 14, 26);
--bs-purple-25: rgb(254, 252, 255);
--bs-purple-50: rgb(250, 245, 255);
--bs-purple-75: rgb(246, 237, 255);
--bs-purple-100: rgb(241, 230, 252);
--bs-purple-200: rgb(226, 202, 252);
--bs-purple-300: rgb(211, 174, 252);
--bs-purple-400: rgb(193, 144, 252);
--bs-purple-500: rgb(173, 115, 250);
--bs-purple-600: rgb(143, 82, 222);
--bs-purple-700: rgb(109, 65, 171);
--bs-purple-800: rgb(76, 47, 117);
--bs-purple-900: rgb(49, 32, 74);
--bs-purple-925: rgb(37, 27, 54);
--bs-purple-950: rgb(24, 18, 36);
--bs-purple-975: rgb(16, 13, 20);
--bs-pink-25: rgb(255, 252, 254);
--bs-pink-50: rgb(255, 242, 251);
--bs-pink-75: rgb(255, 235, 248);
--bs-pink-100: rgb(255, 227, 245);
--bs-pink-200: rgb(255, 191, 232);
--bs-pink-300: rgb(255, 158, 218);
--bs-pink-400: rgb(252, 126, 204);
--bs-pink-500: rgb(235, 91, 177);
--bs-pink-600: rgb(191, 73, 144);
--bs-pink-700: rgb(158, 51, 113);
--bs-pink-800: rgb(112, 35, 80);
--bs-pink-900: rgb(66, 28, 50);
--bs-pink-925: rgb(51, 23, 38);
--bs-pink-950: rgb(36, 16, 27);
--bs-pink-975: rgb(23, 12, 18);
--bs-red-25: rgb(255, 252, 252);
--bs-red-50: rgb(255, 246, 245);
--bs-red-75: rgb(255, 237, 235);
--bs-red-100: rgb(255, 214, 209);
--bs-red-200: rgb(255, 186, 178);
--bs-red-300: rgb(255, 150, 138);
--bs-red-400: rgb(255, 117, 102);
--bs-red-500: rgb(237, 100, 88);
--bs-red-600: rgb(209, 69, 56);
--bs-red-700: rgb(163, 54, 46);
--bs-red-800: rgb(122, 45, 39);
--bs-red-900: rgb(71, 29, 26);
--bs-red-925: rgb(46, 17, 16);
--bs-red-950: rgb(33, 14, 13);
--bs-red-975: rgb(18, 9, 8);
--bs-orange-25: rgb(255, 253, 250);
--bs-orange-50: rgb(255, 248, 240);
--bs-orange-75: rgb(255, 242, 227);
--bs-orange-100: rgb(255, 220, 181);
--bs-orange-200: rgb(255, 197, 135);
--bs-orange-300: rgb(252, 170, 88);
--bs-orange-400: rgb(235, 145, 61);
--bs-orange-500: rgb(214, 125, 47);
--bs-orange-600: rgb(176, 99, 37);
--bs-orange-700: rgb(140, 81, 36);
--bs-orange-800: rgb(107, 61, 28);
--bs-orange-900: rgb(64, 38, 20);
--bs-orange-925: rgb(38, 23, 13);
--bs-orange-950: rgb(28, 19, 13);
--bs-orange-975: rgb(15, 11, 8);
--bs-yellow-25: rgb(255, 254, 250);
--bs-yellow-50: rgb(255, 249, 229);
--bs-yellow-75: rgb(255, 244, 209);
--bs-yellow-100: rgb(255, 231, 161);
--bs-yellow-200: rgb(250, 212, 97);
--bs-yellow-300: rgb(242, 194, 61);
--bs-yellow-400: rgb(212, 162, 36);
--bs-yellow-500: rgb(184, 140, 37);
--bs-yellow-600: rgb(145, 113, 38);
--bs-yellow-700: rgb(117, 92, 33);
--bs-yellow-800: rgb(92, 69, 21);
--bs-yellow-900: rgb(54, 42, 17);
--bs-yellow-925: rgb(33, 26, 12);
--bs-yellow-950: rgb(26, 21, 11);
--bs-yellow-975: rgb(13, 10, 6);
--bs-green-25: rgb(250, 255, 252);
--bs-green-50: rgb(242, 252, 246);
--bs-green-75: rgb(222, 252, 232);
--bs-green-100: rgb(195, 250, 212);
--bs-green-200: rgb(152, 235, 178);
--bs-green-300: rgb(111, 214, 142);
--bs-green-400: rgb(86, 191, 116);
--bs-green-500: rgb(70, 166, 95);
--bs-green-600: rgb(48, 133, 70);
--bs-green-700: rgb(38, 105, 55);
--bs-green-800: rgb(32, 79, 44);
--bs-green-900: rgb(23, 51, 30);
--bs-green-925: rgb(17, 36, 21);
--bs-green-950: rgb(11, 23, 14);
--bs-green-975: rgb(8, 15, 10);
--bs-teal-25: rgb(250, 255, 255);
--bs-teal-50: rgb(237, 252, 252);
--bs-teal-75: rgb(220, 250, 249);
--bs-teal-100: rgb(198, 247, 245);
--bs-teal-200: rgb(135, 232, 226);
--bs-teal-300: rgb(105, 214, 205);
--bs-teal-400: rgb(77, 189, 178);
--bs-teal-500: rgb(61, 166, 154);
--bs-teal-600: rgb(47, 130, 119);
--bs-teal-700: rgb(29, 105, 93);
--bs-teal-800: rgb(26, 79, 70);
--bs-teal-900: rgb(21, 51, 46);
--bs-teal-925: rgb(15, 36, 32);
--bs-teal-950: rgb(10, 23, 20);
--bs-teal-975: rgb(9, 18, 16);
--bs-cyan-25: rgb(250, 254, 255);
--bs-cyan-50: rgb(240, 251, 252);
--bs-cyan-75: rgb(225, 246, 250);
--bs-cyan-100: rgb(207, 245, 252);
--bs-cyan-200: rgb(161, 225, 240);
--bs-cyan-300: rgb(132, 208, 227);
--bs-cyan-400: rgb(101, 184, 207);
--bs-cyan-500: rgb(73, 158, 184);
--bs-cyan-600: rgb(46, 128, 153);
--bs-cyan-700: rgb(33, 100, 122);
--bs-cyan-800: rgb(27, 76, 94);
--bs-cyan-900: rgb(21, 48, 59);
--bs-cyan-925: rgb(16, 33, 41);
--bs-cyan-950: rgb(11, 23, 28);
--bs-cyan-975: rgb(8, 15, 18);
--bs-gray-25: rgb(252, 253, 254);
--bs-gray-50: rgb(248, 250, 252);
--bs-gray-75: rgb(242, 245, 250);
--bs-gray-100: rgb(233, 237, 242);
--bs-gray-200: rgb(219, 224, 232);
--bs-gray-300: rgb(197, 205, 217);
--bs-gray-400: rgb(160, 171, 186);
--bs-gray-500: rgb(128, 139, 156);
--bs-gray-600: rgb(103, 115, 133);
--bs-gray-700: rgb(78, 87, 102);
--bs-gray-800: rgb(45, 54, 69);
--bs-gray-900: rgb(25, 31, 41);
--bs-gray-925: rgb(17, 22, 31);
--bs-gray-950: rgb(13, 19, 28);
--bs-gray-975: rgb(9, 14, 23);
--bs-gray-25: rgb(252, 253, 254);
--bs-gray-50: rgb(248, 250, 252);
--bs-gray-75: rgb(242, 245, 250);
--bs-gray-100: rgb(233, 237, 242);
--bs-gray-200: rgb(219, 224, 232);
--bs-gray-300: rgb(197, 205, 217);
--bs-gray-400: rgb(160, 171, 186);
--bs-gray-500: rgb(128, 139, 156);
--bs-gray-600: rgb(103, 115, 133);
--bs-gray-700: rgb(78, 87, 102);
--bs-gray-800: rgb(45, 54, 69);
--bs-gray-900: rgb(25, 31, 41);
--bs-gray-925: rgb(17, 22, 31);
--bs-gray-950: rgb(13, 19, 28);
--bs-gray-975: rgb(9, 14, 23);
--bs-primary: rgb(49, 95, 135);
--bs-secondary: rgb(151, 203, 240);
--bs-success: rgb(48, 133, 70);
--bs-info: rgb(62, 123, 173);
--bs-warning: rgb(242, 194, 61);
--bs-danger: rgb(209, 69, 56);
--bs-light: rgb(248, 250, 252);
--bs-dark: rgb(13, 19, 28);
--bs-primary-rgb: 49, 95, 135;
--bs-secondary-rgb: 151, 203, 240;
--bs-success-rgb: 48, 133, 70;
--bs-info-rgb: 62, 123, 173;
--bs-warning-rgb: 242, 194, 61;
--bs-danger-rgb: 209, 69, 56;
--bs-light-rgb: 248, 250, 252;
--bs-dark-rgb: 13, 19, 28;
--bs-primary-text-emphasis: #142636;
--bs-secondary-text-emphasis: #3c5160;
--bs-success-text-emphasis: #13351c;
--bs-info-text-emphasis: #193145;
--bs-warning-text-emphasis: #614e18;
--bs-danger-text-emphasis: #541c16;
--bs-light-text-emphasis: rgb(78, 87, 102);
--bs-dark-text-emphasis: rgb(78, 87, 102);
--bs-primary-bg-subtle: #d6dfe7;
--bs-secondary-bg-subtle: #eaf5fc;
--bs-success-bg-subtle: #d6e7da;
--bs-info-bg-subtle: #d8e5ef;
--bs-warning-bg-subtle: #fcf3d8;
--bs-danger-bg-subtle: #f6dad7;
--bs-light-bg-subtle: #f4f6f9;
--bs-dark-bg-subtle: rgb(160, 171, 186);
--bs-primary-border-subtle: #adbfcf;
--bs-secondary-border-subtle: #d5eaf9;
--bs-success-border-subtle: #acceb5;
--bs-info-border-subtle: #b2cade;
--bs-warning-border-subtle: #fae7b1;
--bs-danger-border-subtle: #edb5af;
--bs-light-border-subtle: rgb(219, 224, 232);
--bs-dark-border-subtle: rgb(128, 139, 156);
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: rgb(25, 31, 41);
--bs-body-color-rgb: 25, 31, 41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255, 255, 255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;
--bs-secondary-color: rgba(25, 31, 41, 0.75);
--bs-secondary-color-rgb: 25, 31, 41;
--bs-secondary-bg: rgb(219, 224, 232);
--bs-secondary-bg-rgb: 219, 224, 232;
--bs-tertiary-color: rgba(25, 31, 41, 0.5);
--bs-tertiary-color-rgb: 25, 31, 41;
--bs-tertiary-bg: rgb(233, 237, 242);
--bs-tertiary-bg-rgb: 233, 237, 242;
--bs-heading-color: inherit;
--bs-link-color: rgb(49, 95, 135);
--bs-link-color-rgb: 49, 95, 135;
--bs-link-decoration: underline;
--bs-link-hover-color: #274c6c;
--bs-link-hover-color-rgb: 39, 76, 108;
--bs-code-color: rgb(235, 91, 177);
--bs-highlight-bg: rgb(255, 231, 161);
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: rgb(197, 205, 217);
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.438rem;
--bs-border-radius-sm: 0.375rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(
--bs-border-radius-xxl
);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(49, 95, 135, 0.25);
--bs-form-valid-color: rgb(48, 133, 70);
--bs-form-valid-border-color: rgb(48, 133, 70);
--bs-form-invalid-color: rgb(209, 69, 56);
--bs-form-invalid-border-color: rgb(209, 69, 56);
--bs-spacer-0: 0;
--bs-spacer-1: 0.25rem;
--bs-spacer-2: 0.5rem;
--bs-spacer-3: 1rem;
--bs-spacer-4: 1.5rem;
--bs-spacer-5: 3rem;